<template>
	<view class="hotspot" :style="{ height: webStyle.height }">
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
			<view class="title">热点文案</view>
			<view class="back"></view>
		</view>
		<view class="tabbar-list-box">
			<view class="tabbar-list">
				<view :class="['item', tabbarListAc == index ? 'ac' : '']" v-for="(item, index) in tabbarList" :key="index" @tap="changeTabbarListAc(item, index)">
					<view class="hot" v-if="item.isHot"></view>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<scroll-view
			class="cont-list"
			:scroll-top="scrollTop"
			:scroll-y="true"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			:refresher-threshold="45"
			@scrolltolower="scrolltolower"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
		>
			<view class="item" v-for="(item, index) in contList" :key="index" @tap="toCreateCont(item, index)">
				<view class="dot" :style="{ background: item.dot }"></view>
				<view class="cont">{{ item.cont }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/createVideo.js";

export default {
	name: "hotspot",
	data() {
		return {
			imgPath: tools.imgPath,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			userInfo: {},
			currentPage: 1,
			pageSize: 20,
			scrolltolowerLock: false,
			scrollTop: -1,
			tabbarListAc: 0,
			tabbarList: [
				// {
				// 	isHot: true,
				// 	text: "全网"
				// },
			],
			contList: [
				// {
				// 	cont: "是什么突然让你放弃一段感情",
				// 	dot: "#ff0000"
				// },
				// {
				// 	cont: "经常用耳机的3个60原则",
				// 	dot: "#f3ad33"
				// },
				// {
				// 	cont: "是什么突然让你放弃一段感情",
				// 	dot: "#00997f"
				// },
				// {
				// 	cont: "韩国记者画熊猫仿妆哽咽告别福宝",
				// 	dot: ""
				// },
				// {
				// 	cont: "快递新规下的驿站",
				// 	dot: ""
				// },
				// {
				// 	cont: "是什么突然让你放弃一段感情",
				// 	dot: ""
				// },
				// {
				// 	cont: "经常用耳机的3个60原则",
				// 	dot: ""
				// },
				// {
				// 	cont: "韩国记者画熊猫仿妆哽咽告别福宝",
				// 	dot: ""
				// },
				// {
				// 	cont: "快递新规下的驿站",
				// 	dot: ""
				// }
			],
			triggered: false
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 4.5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		//判断登录
		async isLogin() {
			if (!this.userInfo.detailInfoRightList) {
				let res = await api.getSelectauditlist();
				return !!res;
			} else {
				return true;
			}
		},
		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			this.userInfo.detailInfoRightList = (this.userInfo.detailInfoRightList || [])
				.filter((e) => {
					return !["AI绘画", "文案生成"].includes(e.rightsName);
				})
				.map((e) => {
					switch (e.rightsName) {
						case "AI成片":
							e.rightsDescript = "快速成片";
							break;
						case "AI变声":
							e.rightsDescript = "文本转语音";
							break;
						case "数字名片":
							e.rightsDescript = "照片说话";
							break;
					}
					return e;
				});
			// console.log(this.userInfo);
		},

		// TabbarList初始化
		async initTabbarList() {
			let res = await api.getHotspotTabbarList({
				classify_type: "sour_hd"
			});
			if (!res && !res.data) {
				this.tabbarList = [];
				return;
			}
			this.tabbarList = res.data.map((e) => {
				return {
					...e,
					isHot: false,
					text: e.name
				};
			});
			this.tabbarListAc = 0;
			this.initContList();
		},

		// 切换TabbarListAc
		async changeTabbarListAc(item, index) {
			this.tabbarListAc = index;
			this.currentPage = 1;
			this.initContList();
		},
		// ContList初始化
		async initContList() {
			let res = await api.getAiworkRtsQuery({
				currentPage: this.currentPage,
				pageSize: this.pageSize,
				motif: this.tabbarList[this.tabbarListAc].id.toString()
			});
			if (!res) {
				this.contList = [];
				/* 
					{
							"id": 1,
							"motifId": 6789,
							"motifName": "测试不同标签，去重检测",
							"sourceName": "中华国内",
							"description": "",
							"title": "副热带高压位置再次变化！我国主雨带出现小幅变动",
							"picUrl": "https://img1.utuku.imgcdc.com/300x200/news/20240708/4e66f40e-66eb-487a-9fd9-bcd2136db576.jpg",
							"url": "https://news.china.com/domestic/945/20240708/46813655.html",
							"ctime": "2024-07-08T00:00:00",
							"logicStatus": 0
					}
				 */
				return false;
			}
			let contList = [];
			if (this.currentPage != 1) {
				contList = [
					...this.contList,
					...res.data.source.map((e, i) => {
						return {
							...e,
							cont: e.title,
							dot: i == 0 ? "#ff0000" : i == 1 ? "#f3ad33" : i == 2 ? "#00997f" : ""
						};
					})
				];
			} else {
				this.scrollTop = 0;
				contList = res.data.source.map((e, i) => {
					return {
						...e,
						cont: e.title,
						dot: i == 0 ? "#ff0000" : i == 1 ? "#f3ad33" : i == 2 ? "#00997f" : ""
					};
				});
			}
			this.contList = contList;
			setTimeout(() => {
				this.scrollTop = -1;
			}, 186);
			return true;
		},

		// 刷新控件被下拉
		onPulling(evnet) {
			// console.log("onPulling");
		},
		// 刷新控件被触发
		async onRefresh(evnet) {
			if (this._freshing) return;
			this.triggered = true;
			this.contList = [];
			this.currentPage = 1;
			await this.initContList();
			this.triggered = false;
		},
		// 刷新控件被复位
		onRestore(evnet) {
			// this.triggered = false;
			console.log("onRestore");
		},
		// 刷新控件被中止
		onAbort(evnet) {
			console.log("onAbort");
		},
		// 滚动到底部
		async scrolltolower(event) {
			if (this.scrolltolowerLock) return;
			this.scrolltolowerLock = true;
			console.log("滚动到底部");
			this.currentPage++;
			await this.initContList();
			this.scrolltolowerLock = false;
		},
		// 跳转生成文案
		async toCreateCont(item, index) {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			let createContInfo = uni.getStorageSync("createContInfo");
			uni.setStorageSync("createContInfo", {
				sourceId: item.id,
				h1_text: item.title,
				...createContInfo
			});
			this.toPage("/pages/createCont/createCont");
		}
	},
	created() {
		this.initSystemInfo();
		this.initTabbarList();
	},
	async onLoad(opt) {}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.hotspot {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(#034748 0%, #010c1f 100%);
	box-sizing: border-box;
	padding: 0vw 3vw 6vw;
	display: flex;
	flex-direction: column;

	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.back {
			width: 6vw;
		}

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
	.tabbar-list {
		display: -webkit-box;
		overflow: auto;
		margin: 6vw 0vw;
		.item {
			border-radius: 100vw;
			background: rgba(255, 255, 255, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1.5vw 3.5vw;
			position: relative;
			font-size: 4.6vw;
			font-weight: 400;
			color: rgba(123, 158, 149, 1);
			margin-right: 3vw;

			&.ac {
				background: rgba(0, 153, 127, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	.cont-list {
		flex: 1;
		overflow: hidden;
		.item {
			display: flex;
			align-items: center;
			padding: 6vw 0vw 3vw;

			.dot {
				width: 2vw;
				height: 2vw;
				margin-right: 2.5vw;
				border-radius: 50%;
				background: rgba(54, 85, 93, 1);
			}

			.cont {
				font-size: 4.6vw;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				width: 20em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
		}
	}
}
</style>
